/**
 * this.setState([partialState], [callback]);
 * 支持部分状态的更改
 * callback
 *  是在状态改变视图更新后触发执行的，在处理了componentDidUpdate周期函数后，执行callback
 *  如果基于shouldComponentUpdate进行了拦截，视图并没有更新，也会把callback执行
 *  类似于vue中的$nextTick
 * 在react18之前，我们只在react合成事件/周期函数期间批量更新；
 * 默认情况下，react中不会对promise、setTimeout、原生事件处理或其他react默认不进行批处理操作
 * 在react18中，对setState的操作，采用了批处理
 *  构建了队列机制
 *  统一更新，提高视图更新的性能
 *  处理流程更加健康
 */
import { flushSync } from 'react-dom'
class Demo extends React.Component {
    state = {
        num: 0
    }
    componentDidMount() {
        // 强制更新一次
        flushSync(() => {
            this.setState({
                y: 1
            })
        })
        for(let i = 0; i < 10; i++) {
            // 函数写法，能够拿到之前的状态
            this.setState(prevState => {
                console.log(prevState)
                return {
                    num: prevState.num + 1
                }
            })
        }
    }
}
